<!Doctype html>
<html lang="zh">
	<head>
		<title>About CocoZack - 首页</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<header>
			<div class="header_div">
				<div class="logo">
					<a href="./index.html">CocoZack</a>
				</div>
				<nav class="header_nav">
					<ul>
						<li><a class="active" href="./index.html">首页</a></li>
						<li><a href="./education.html">教育经历</a></li>
						<li><a href="./hobby.html">兴趣＆爱好</a></li>
						<li><a href="./note.html">笔记</a></li>
					</ul>
				</nav>
			</div>
		</header>

		<section class="banner_section">
			<div class="banner">
				<div class="banner_div">
					<div class="avatar">
						<img src="./img/avatar01.jpg" alt="avatar">
					</div>
					<h1>The Name is Zack, Coco Zack.</h1>
					<h2>Welcome to my world.</h2>
				</div>
			</div>
			<img class="slide-down" src="./img/down.png" alt="down">
		</section>

		<section class="chapter">
			<h3 class="chapter_title">关于Zack</h3>
			<ul class="chapter_sub_title">
				<li><a class="sub_title_code active" href="javascript:void(0)">代码</a></li>
				<li><a class="sub_title_drawing" href="javascript:void(0)">涂鸦</a></li>
				<li><a class="sub_title_cat" href="javascript:void(0)">吸猫</a></li>
			</ul>
			<div class="gallery">
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code01.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Java</h4>
							<p>高级程序设计语言</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code02.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>HTML</h4>
							<p>HTML</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code05.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Material UI</h4>
							<p>非常强大的CSS框架</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code06.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Code</h4>
							<p>Code</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code07.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>课程设计</h4>
							<p>刚写完就赶紧拍了一张</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code04.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>JavaScript</h4>
							<p>Web 的编程语言</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code08.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Code</h4>
							<p>Code</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div code">
						<img class="gallery_img" src="./img/code09.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>ReactJS</h4>
							<p>最好的开源JavaScript框架之一</p>
						</div>
					</div>
				</a>

				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw08.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/avatar01.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw04.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw01.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw03.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw02.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div drawing">
						<img class="gallery_img" src="./img/draw09.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Drawing</h4>
							<p>My Drawing</p>
						</div>
					</div>
				</a>

				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat03.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat04.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat05.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat06.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat07.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
				<a href="javascript:void(0)" class="gallery_a">
					<div class="gallery_div cat">
						<img class="gallery_img" src="./img/cat08.jpg" alt="gallery">
						<div class="gallery_title">
							<h4>Cat</h4>
							<p>My Cat</p>
						</div>
					</div>
				</a>
			</div>
		</section>

		<section class="chapter dark">
			<h3 class="chapter_title">技能 & Flag</h3>
			<div class="chapter_grid">
				<div class="chapter_half_grid">
					<div class="skill">
						<div class="skill_tp">
							<p class="skill_title">HTML, CSS</p>
							<p class="skill_progress">74%</p>
						</div>
						<div class="skill_bar">
							<div data-progress="64" class="skill_progress_bar"></div>
						</div>
					</div>
					<div class="skill">
						<div class="skill_tp">
							<p class="skill_title">JavaScript, JQuery</p>
							<p class="skill_progress">55%</p>
						</div>
						<div class="skill_bar">
							<div data-progress="55" class="skill_progress_bar"></div>
						</div>
					</div>
					<div class="skill">
						<div class="skill_tp">
							<p class="skill_title">JAVA</p>
							<p class="skill_progress">39%</p>
						</div>
						<div class="skill_bar">
							<div data-progress="39" class="skill_progress_bar"></div>
						</div>
					</div>
					<div class="skill">
						<div class="skill_tp">
							<p class="skill_title">Photoshop</p>
							<p class="skill_progress">70%</p>
						</div>
						<div class="skill_bar">
							<div data-progress="70" class="skill_progress_bar"></div>
						</div>
					</div>
					<div class="skill">
						<div class="skill_tp">
							<p class="skill_title">ReactJS</p>
							<p class="skill_progress">23%</p>
						</div>
						<div class="skill_bar">
							<div data-progress="23" class="skill_progress_bar"></div>
						</div>
					</div>
				</div>
				<div class="chapter_half_grid">
					<h4>8102新年企划（Flag）</h4>
					<ol>
						<li>读完Word Power Made Easy <span class="small_complain">Nah, Never!</span></li>
						<li>读完American Accent Training <span class="small_complain">You wish</span></li>
						<li>读完手头的纸质书 <span class="small_complain">Keep dreaming</span></li>
						<li>学习Gamemaker Studio 2 <span class="small_complain">Come on</span></li>
						<li>入门日语 <span class="small_complain">Say it like you mean it</span></li>
						<li>入门超轻粘土 <span class="small_complain">emmmmm</span></li>
					</ol>
				</div>
			</div>
		</section>

		<section class="chapter">
			<h3 class="chapter_title">兴趣 & 爱好</h3>
			<table class="interest">
				<tbody>
				<tr>
					<td>
						<img src="./img/icon01.png" alt="动画">
						<h4>动画</h4>
						<hr>
						<p>Adventure Time / Steven Universe / South Park / Regular Work / Teen Titans GO!</p>
					</td>
					<td>
						<img src="./img/icon02.png" alt="电影">
						<h4>电影</h4>
						<hr>
						<p>The Dark Knight Trilogy / Star Wars / Tinker,Tailor,Soldier,Spy / Darkest Hour</p>
					</td>
					<td>
						<img src="./img/icon03.png" alt="画画">
						<h4>画画</h4>
						<hr>
						<p>I love to draw, especially when I don't need to finish my drawing.</p>
					</td>
				</tr>
				<tr>
					<td>
						<img src="./img/icon04.png" alt="读书">
						<h4>读书</h4>
						<hr>
						<p>I bought some books on Amazon three years ago and I still didn't read through all of them.</p>
					</td>
					<td>
						<img src="./img/icon05.png" alt="音乐">
						<h4>音乐</h4>
						<hr>
						<p>Alright my favorite rapper is Eminem, who released his latest album on December last year.</p>
					</td>
					<td>
						<img src="./img/icon06.png" alt="英语">
						<h4>英语</h4>
						<hr>
						<p>I will to finish <i>Word Power Made Easy</i> and <i>American Accent Training</i>. I promise.</p>
					</td>
				</tr>
				</tbody>
			</table>
		</section>

		<section class="chapter dark">
			<h3 class="chapter_title">笔记</h3>
			<div class="note">
				<a target="_blank" href="http://www.cnblogs.com/Chen-XiaoJun/p/6246946.html">
					<div class="note_item">
						<div class="note_title">
							<h5>React 还是 Vue: 你应该选择哪一个Web前端框架？</h5>
							<p>2017年01月03日 | 作者：<span class="author">chenxj</span></p>
						</div>
						<img class="note_pic" src="./img/pic01.png" alt="pic">
						<p class="note_content">不得不说React和Vue的使用范围是相似的：都是基于组件化的轻量级框架，都专注于构建用户界面的视图层；都既可以用于简单的项目，也适用于使用前沿技术……</p>
					</div>
				</a>
				<a target="_blank" href="https://juejin.im/post/5a0d5df1f265da43062a542f">
					<div class="note_item">
						<div class="note_title">
							<h5>[译] 2017 年比较 Angular、React、Vue 三剑客</h5>
							<p>2017年11月16日 | 作者：<span class="author">Raoul1996</span></p>
						</div>
						<img class="note_pic" src="./img/pic02.jpg" alt="pic">
						<p class="note_content">为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行，并且最近出现的新贵 VueJS 同样博得了很多人的关注……</p>
					</div>
				</a>
				<a target="_blank" href="https://juejin.im/post/5b111436e51d4506d06205fd">
					<div class="note_item">
						<div class="note_title">
							<h5>[译文] 现代 js 框架存在的根本原因</h5>
							<p>2018年06月02日 | 作者：<span class="author">sea_ljf</span></p>
						</div>
						<img class="note_pic" src="./img/pic03.jpg" alt="pic">
						<p class="note_content">曾见过很多很多人盲目地使用（前端）框架，如 React，Angular 或 Vue等等。这些框架提供了许多有意思的东西，然而通常人们（自以为）使用框架是因为……</p>
					</div>
				</a>
			</div>
		</section>

		<section class="chapter">
			<h3 class="chapter_title">Come on, Get In Touch</h3>
			<div class="contact">
				<div class="contact_div">
					<div class="contact_item">
						<img class="contact_icon" src="./img/icon07.png" alt="pic">
						<div class="contact_title">
							<h5>手机号</h5>
							<p>188****2991</p>
						</div>
					</div>
					<div class="contact_item">
						<img class="contact_icon" src="./img/icon08.png" alt="pic">
						<div class="contact_title">
							<h5>出没地点</h5>
							<p>中南财经政法大学</p>
						</div>
					</div>
					<div class="contact_item">
						<img class="contact_icon" src="./img/icon09.png" alt="pic">
						<div class="contact_title">
							<h5>邮箱</h5>
							<p>1246926983@qq.com</p>
						</div>
					</div>
				</div>
				<form class="contact_form" onsubmit="return submit_contact()">
					<div>
						<input type="text" class="contact_input" name="contact_name" id="contact_name" placeholder="请输入昵称">
						<input type="text" class="contact_input" name="contact_email" id="contact_email" placeholder="请输入昵称">
					</div>
					<textarea class="contact_textarea" name="contact_content" id="contact_content" placeholder="请输入消息内容"></textarea>
					<button class="contact_submit" type="submit">联系Zack</button>
				</form>
			</div>
		</section>

		<footer>
			<p>© 2018 Website Design And Development Homework By Coco Zack 张可</p>
		</footer>
		
		<div class="to_the_top" onclick="toTop()">
			<img src="./img/blackboard.png" alt="回到顶部">
		</div>
		
		<script src="./plugins/jquery-3.3.1.min.js"></script>
		<script src="./js/global.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>